import { get_self_access_record_info } from '@/services/patient';
import age from '@/utils/age';
import { ProDescriptions, ProTable } from '@ant-design/pro-components';
import { Divider, Modal, Typography } from 'antd';
import { useEffect, useRef, useState } from 'react';
import { default as time, default as timeToHms } from '../../../utils/time';
const { Title } = Typography;

interface Iprops {
  isShowSeft: (show: boolean) => void;
  selfisModalOpen: boolean;
  selfId: number | undefined;
}
const SelfAssessmentInfo = (props: Iprops) => {
  const { isShowSeft, selfisModalOpen, selfId } = props;
  const actionRef = useRef();
  // 存储自我评估记录详情
  const [recordinfo, setrecordinfo] = useState<any>(undefined);
  // 存储视频条数
  const [total_nums, settotal_nums] = useState(0);
  // 存储视频总时长
  const [total_time, settotal_time] = useState('00:00:00');
  // 评估信息
  const [list, setlist] = useState<any>(undefined);

  // 页面初始化
  useEffect(() => {
    const getData = async () => {
      if (selfId) {
        let res: any = await get_self_access_record_info({ id: selfId });
        console.log('自我评估详情', res);
        if (res.code === 200) {
          // 设置自我评估记录详情
          setrecordinfo(res.data);
          if (res.data.plan != null) {
            //训练计划总条数和总时长
            settotal_nums(res.data.plan.video.length);
            var sum = 0;
            res.data.plan.video.map((item: any) => {
              sum += parseInt(item.video_time);
            });
            settotal_time(timeToHms(sum));
          }
        }
      }
    };
    getData();
  }, []);

  // 获取患者详情
  const get_oldinfo = async () => {
    return {
      data: recordinfo,
    };
  };

  // 获取评估信息
  const get_assessmentlist = async () => {
    setlist(recordinfo.question);
    return {
      data: recordinfo,
    };
  };

  // 获取训练计划
  const get_train = async () => {
    return {
      data: recordinfo.plan,
    };
  };

  // 获取视频
  const get_video = async () => {
    var video_list = recordinfo.plan.video;
    for (let i = 0; i < video_list.length; i++) {
      video_list[i]['key'] = i;
    }
    return {
      data: recordinfo.plan.video,
      total: recordinfo.plan.video.length + 1,
    };
  };

  // 训练计划列表
  const columns: any = [
    {
      title: '序号',
      dataIndex: 'index',
      align: 'center',
      valueType: 'index',
      key: 'index',
    },
    {
      title: '视频名称',
      align: 'center',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '类型',
      dataIndex: 'video_type',
      align: 'center',
      key: 'video_type',
    },
    {
      title: '时长',
      dataIndex: 'video_time',
      align: 'center',
      key: 'video_time',
      render: (_: any, record: { video_time: any }) => {
        return time(record.video_time);
      },
    },
    {
      title: '训练频次',
      dataIndex: 'number',
      align: 'center',
      key: 'number',
    },
  ];
  return (
    <Modal
      title="评估详情"
      open={selfisModalOpen}
      onCancel={() => isShowSeft(false)}
      width={1100}
      footer={null}
    >
      <Divider />
      <Typography>
        {/* 评估详情 */}
        {recordinfo != undefined ? (
          <>
            <ProDescriptions
              column={4}
              style={{
                padding: '0 20px 0 20px',
              }}
              request={async (params) => get_oldinfo()}
              columns={[
                {
                  title: '姓名',
                  key: 'old_name',
                  dataIndex: 'old_name',
                },
                {
                  title: '身份证号',
                  key: 'id_card',
                  dataIndex: 'id_card',
                },
                {
                  title: '性别',
                  key: 'sex',
                  dataIndex: 'sex',
                  valueType: 'select',
                  valueEnum: {
                    1: {
                      text: '男',
                    },
                    2: {
                      text: '女',
                    },
                  },
                },
                {
                  title: '年龄',
                  key: 'age',
                  dataIndex: 'age',
                  render: (_, record) => {
                    if (record.birth != '') {
                      return age(record.birth) + '岁';
                    } else {
                      return '-';
                    }
                  },
                },
                {
                  title: '手机号',
                  key: 'phone',
                  dataIndex: 'phone',
                },
                {
                  title: '民族',
                  key: 'nation',
                  dataIndex: 'nation',
                },
                {
                  title: '家庭地址',
                  key: 'family_address',
                  dataIndex: 'family_address',
                },
              ]}
            ></ProDescriptions>
            {/* <Divider dashed /> */}
            <Title level={5}>评估信息</Title>
            <ProDescriptions
              style={{
                padding: '20px 20px 0 20px',
              }}
              request={async (params) => get_assessmentlist()}
              columns={[
                {
                  title: '评估时间',
                  key: 'create_time',
                  dataIndex: 'create_time',
                },
                {
                  title: '评估等级',
                  key: 'level',
                  dataIndex: 'level',
                },
                {
                  title: '等级说明',
                  key: 'level_remark',
                  dataIndex: 'level_remark',
                },
              ]}
            ></ProDescriptions>
            <div style={{ marginLeft: '30px', marginTop: '10px' }}>
              {list != undefined
                ? list.map((item: any, key: string) => {
                    return (
                      <div key={key} style={{ marginBottom: '20px' }}>
                        <p>
                          {key + 1}.{item.question}
                        </p>

                        <label style={{ marginLeft: '50px' }}>
                          <input
                            type="radio"
                            name={key}
                            readOnly
                            checked={item.option[0].is_selected == 0 ? false : true}
                          />
                          {item.option[0].option_value}
                        </label>

                        <label style={{ marginLeft: '50px' }}>
                          <input
                            type="radio"
                            name={key}
                            readOnly
                            checked={item.option[1].is_selected == 0 ? false : true}
                          />
                          {item.option[1].option_value}
                        </label>
                      </div>
                    );
                  })
                : ''}
            </div>
            {/* <Divider dashed /> */}
            <Title level={5}>训练计划</Title>
            <ProDescriptions
              style={{
                padding: '20px',
              }}
              request={async (params) => get_train()}
              columns={[
                {
                  title: '训练周期',
                  key: 'days_number',
                  dataIndex: 'days_number',
                },
                {
                  title: '开始时间',
                  key: 'start_date',
                  dataIndex: 'start_date',
                },
                {
                  title: '结束时间',
                  key: 'end_date',
                  dataIndex: 'end_date',
                },
              ]}
            ></ProDescriptions>
            <ProTable
              columns={columns}
              actionRef={actionRef}
              request={async (params) => get_video()}
              rowKey={(record) => record.key}
              search={false}
              toolBarRender={false}
              size="middle"
              pagination={false}
              dateFormatter="string"
            />
            <p style={{ marginTop: '5px' }}>
              共计：<span style={{ color: 'red' }}>{total_nums}</span>条 总时长：
              <span style={{ color: 'red' }}>{total_time}</span>
            </p>
          </>
        ) : (
          ''
        )}
      </Typography>
    </Modal>
  );
};
export default SelfAssessmentInfo;
